<template>
    <div id="leftLevel">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-bar"></icon>
                </span>
                <div class="d-flex">
                    <template v-if="areaDataObj.areaLevel === 'province'">
                        <span>{{areaDataObj.areaName}}</span>
                    </template>
                    <template v-else>
                        <span>养殖相关参数</span>
                    </template>
                    <!-- <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;"/> -->
                </div>
            </div>
            <div id="parent" style="height:4.28rem;overflow: scroll;">
                <!-- <div  id="left1" style="height:4.18rem;">
                </div> -->
				<dv-active-ring-chart :config="config" style="width:280px;height:280px" />
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "leftLevel",
        data() {
            return {
                areaDataObj: {
                    areaCode: "410000",
                    areaLevel: "province",
                    name: "销售饼状图",
                    areaName: "销售饼状图",
                },
				option:{},
				myChart:null,
				config:{
					data: [
					    {
					      name: '华南',
					      value: 40
					    },
					    {
					      name: '华北',
					      value: 15
					    },
					    {
					      name: '华东',
					      value: 15
					    },
					    {
					      name: '东北',
					      value: 15
					    },
					    {
					      name: '华中',
					      value: 10
					    },
					    {
					      name: '其他',
					      value: 5
					    }
					  ],
					  digitalFlopStyle: {
					    fontSize: 16,
					    fill: '#fff'
					  },
				}
            }
        },
        mounted() {
			// this.setOption();
        },
        methods: {
			setOption(){
				this.myChart = this.$echarts.init(document.getElementById('left1'));
				this.option = {
				  backgroundColor: 'rgb(15,17,33)',
				  title: {
				    text: '测试',
				    left: 'center',
				    top: 20,
				    textStyle: {
				      color: '#ccc'
				    }
				  },
				  tooltip: {
				    trigger: 'item'
				  },
				  visualMap: {
				    show: false,
				    min: 0,
				    max: 100,
				    inRange: {
				      colorLightness: [0, 1]
				    }
				  },
				  series: [
				    {
				      name: 'Access From',
				      type: 'pie',
				      radius: '55%',
				      center: ['50%', '50%'],
				      data: [
				        { value: 40, name: '华东' },
				        { value: 15, name: '华南' },
				        { value: 15, name: '华北' },
				        { value: 15, name: '东北' },
				        { value: 10, name: '华中' },
						{ value: 5, name: '其他' }
				      ].sort(function (a, b) {
				        return a.value - b.value;
				      }),
				      roseType: 'radius',
				      label: {
				        color: 'rgba(255, 255, 255, 0.3)'
				      },
				      labelLine: {
				        lineStyle: {
				          color: 'rgba(255, 255, 255, 0.3)'
				        },
				        smooth: 0.2,
				        length: 10,
				        length2: 20
				      },
				      itemStyle: {
				        color: '#1c5ec2',
				        shadowBlur: 200,
				        shadowColor: 'rgba(0, 0, 0, 0.5)'
				      },
				      animationType: 'scale',
				      animationEasing: 'elasticOut',
				      animationDelay: function (idx) {
				        return Math.random() * 200;
				      }
				    }
				  ]
				};
				console.log(456);
				this.option && this.myChart.setOption(this.option);
				console.log(789);
			},
        }
    }
</script>

<style lang="scss" scoped>
    #leftLevel {
        padding: 0.2rem;
        height: 5.125rem;
        min-width: 3.75rem;
        border-radius: 0.0625rem;

        .bg-color-black {
            height: 4.8125rem;
            border-radius: 0.125rem;
        }

        .text {
            color: #c3cbde;
        }
        #parent::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }

        #parent {
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
</style>
